<template>
  <div class="header-container">
    <div class="header-wrapper">
      <div class="left-wrapper">
        <div class="address text">{{ dataMsg.city }}</div>
        <div class="weather text">{{ dataMsg.weather }}</div>
        <div class="temperature text">{{ dataMsg.temperature }}</div>
      </div>
      <div class="center-wrapper">
        <div class="title"></div>
      </div>
      <div class="right-wrapper">
        <div class="date text">{{ dataMsg.date }}</div>
        <div class="week text">{{ dataMsg.week }}</div>
        <div class="time text">{{ dataMsg.time }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  getCurrentDate,
  getCurrentWeek,
  getCurrentTime,
} from "@/utils/index.js";
import { reactive, onMounted, watch } from "vue";
import { useMapStore, useCityStore } from "@/store/index";
const mapStore = useMapStore();
const cityStore = useCityStore();
const dataMsg = reactive({
  city: "",
  weather: "",
  temperature: "",
  date: getCurrentDate(),
  week: getCurrentWeek(),
  time: "",
});
watch(
  () => cityStore.cityCode,
  () => {
    getWeather();
  }
);
onMounted(() => {
  getCurrentWeek();
  setTimeout(() => {
    getWeather();
  }, 2000);
  setInterval(() => {
    dataMsg.time = getCurrentTime();
  }, 1000);
});
const getWeather = () => {
  mapStore.myMap?.getWeather(cityStore.cityCode, (err, data) => {
    if (err === null) {
      // 城市
      dataMsg.city = data.city;
      // 天气
      dataMsg.weather = data.forecasts[0].dayWeather;
      // 温度
      let temperature =
        data.forecasts[0].nightTemp + "-" + data.forecasts[1].dayTemp + "℃";
      dataMsg.temperature = temperature;

      // 构造路线导航类;
      let position = {
        startLng: "113.808299",
        startLat: "34.7917872",
        endLng: "113.830299",
        endLat: "34.790787",
      };
      mapStore.myMap.addLine(position);
    }
  });
};
</script>

<style lang="scss" scoped>
.header-container {
  width: 100%;
  height: 80px;
  background: url("@/assets/images/header/header-bg.png");
  background-repeat: round;
  background-color: rgba(000, 000, 000, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;

  .header-wrapper {
    padding: 0 40px;
    width: 100%;
    height: 66px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .center-wrapper {
      flex: 1;
      .title {
        margin: auto;
        width: 318px;
        height: 68px;
        background: url("@/assets/images/header/title.png");
        background-repeat: round;
      }
    }
    .left-wrapper,
    .right-wrapper {
      margin-top: 13px;
      width: 400px;
      height: 32px;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 0 40px;

      .text {
        width: fit-content;
        height: 32px;
        font-size: 18px;
        font-weight: 500;
        line-height: 32px;
      }
      .address,
      .time {
        color: rgba(255, 255, 255, 0.87);
        text-shadow: 0px 0px 13px rgba(27, 126, 242, 0.91);
      }
      .weather,
      .temperature,
      .date,
      .week {
        color: #45a2ff;
      }
    }
    .left-wrapper {
      justify-content: flex-start;
    }
    .right-wrapper {
      justify-content: flex-end;
    }
  }
}
</style>
